<script setup>

import {Lock, User} from "@element-plus/icons-vue"
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {userLogin} from "@/api/user";
import {useUserInfoStore} from "@/stores/userInfo"
import {userInfoService} from "@/api/user"

const isRegister = ref(false);

// 数据模型
const registerData = ref({
  username: '',
  password: '',
  rePassword: ''
});

// 自定义校验 判断两次输入密码是否一致
const checkRePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次确认密码'))
  } else if (value !== registerData.value.password) {
    callback(new Error('两次密码不一样'))
  } else {
    callback()
  }
}
const rules = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 5, max: 16, message: '长度为5-16位', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 5, max: 16, message: '长度为5-16位', trigger: 'blur'},
  ],
  rePassword: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {validator: checkRePassword, trigger: 'blur'},
  ]
}
const router = useRouter() // 跳路由
const form = ref(null)
const register = async () => {
  // const valid = await form.value.validate();
  // if (valid) {}
}


const login =  () => {
  form.value.validate((valid)=>{
    if (valid) {
      console.log(registerData.value)
      const obj ={
        params:{
          username: registerData.value.username,
          password :registerData.value.password
        }
      }
      userLogin(obj).then(res=>{
        console.log(res)
        if (res.success) {
          // 存储token
          localStorage.setItem('token', res.data.token)
          // 获取用户信息
          userInfoService().then(userRes => {
            if (userRes.code === 200) {
              const userStore = useUserInfoStore()
              userStore.setUserInfo(userRes.data)
              ElMessage.success(res.message ? res.message : "登录成功");
              router.push({name: "index"});
            } else {
              ElMessage.error(userRes.message || '获取用户信息失败')
            }
          })
        } else {
          ElMessage.error(res.message)
        }
      }).catch(err => {
        ElMessage.error('登录请求失败')
      })
    }
  })
}


const clearRegisterData = () => {
  registerData.value = {
    username: '',
    password: '',
    rePassword: ''
  }
}


</script>

<template>
  <el-row class="login-page">
    <el-col :span="8" class="form-container">
      <div class="form-card">
        <!-- 注册表单 -->
        <el-form ref="form" size="large" autocomplete="on" v-if="isRegister" :model="registerData" :rules="rules" class="form-content">
          <el-form-item class="form-title">
            <h1>创建账号</h1>
          </el-form-item>
        <el-form-item prop="username">
          <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"
                    v-model="registerData.password"></el-input>
        </el-form-item>
        <el-form-item prop="rePassword">
          <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码"
                    v-model="registerData.rePassword"></el-input>
        </el-form-item>
        <!-- 注册按钮 -->
        <el-form-item>
          <el-button class="submit-button" type="primary" auto-insert-space @click="register">
            注册
          </el-button>
        </el-form-item>
        <el-form-item class="form-footer">
          <el-link type="info" :underline="false" @click="isRegister = false;clearRegisterData()">
            ← 返回登录
          </el-link>
        </el-form-item>
        </el-form>

        <!-- 登录表单 -->
        <el-form ref="form" size="large" autocomplete="off" v-else :model="registerData" :rules="rules" class="form-content">
          <el-form-item class="form-title">
            <h1>欢迎回来</h1>
          
          </el-form-item>
        <el-form-item prop="username">
          <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"
                    v-model="registerData.password"></el-input>
        </el-form-item>
        <el-form-item class="form-footer">
          <el-link type="primary" :underline="false" class="forgot-password">忘记密码？</el-link>
        </el-form-item>
        <el-form-item>
          <el-button class="submit-button" type="primary" auto-insert-space @click="login(form)">
            登录
          </el-button>
        </el-form-item>
        <el-form-item class="form-footer">
          <span>还没有账号？</span>
          <el-link type="info" :underline="false" @click="isRegister = true;clearRegisterData()">
            立即注册 →
          </el-link>
        </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
/* 样式优化 */
.login-page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('@/assets/1111.png') no-repeat center / cover;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4));
  }

  .form-container {
    position: relative;
    z-index: 1;
    padding: 40px 0;

    .form-card {
      background: white;
      border-radius: 15px;
      padding: 50px 40px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      max-width: 420px;
      width: 100%;
      margin: 0 auto;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.2);
      }
    }

    .form-title {
      text-align: center;
      margin-bottom: 30px;

      h1 {
        font-size: 1.8rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 12px;
      }
      p {
        font-size: 1rem;
        color: #666;
        line-height: 1.5;
      }
    }

    .submit-button {
      width: 100%;
      height: 50px;
      font-size: 1rem;
      border-radius: 8px;
      transition: all 0.3s ease;
      background-color: #409eff;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(64,158,255,0.35);
        background-color: #3390e9;
      }
    }

    .form-footer {
      display: flex;
      justify-content: center;
      margin-top: 15px;
      color: #666;
      font-size: 0.9rem;

      .forgot-password {
        margin-left: auto;
      }

      span {
        margin-right: 8px;
      }

      a {
        transition: color 0.2s ease;

        &:hover {
          color: #409eff;
        }
      }
    }

    .el-form-item {
      margin-bottom: 22px;
    }

    .el-input {
      height: 50px;
      border-radius: 8px;

      .el-input__wrapper {
        border-radius: 8px;
        height: 50px;
        transition: all 0.3s ease;

        &:focus-within {
          box-shadow: 0 0 0 3px rgba(64,158,255,0.2);
          border-color: #409eff;
        }
      }
    }
  }
}
</style>